<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

        .ul {
            display: flex;
            width: 800px;
            margin: auto;
            height: 400px;
            justify-content: space-between;
        }

        .ul>li {
            width: 6px;
            background-color: #abcdef;
        }
    </style>
</head>
<body>
    <ul class="ul">

    </ul>
    <script>
        // 初始化数组
        function initArray() {

            function getRandom(n) {
                return Math.floor(Math.random() * n);
            }

            let length = 100;

            let arr = [];
            for (let i = 1;i <= length;i ++) {
                arr.push(i);
            }

            let result = [];
            for (let i = 0;i < length;i ++) {
                result.push(arr.splice(getRandom(arr.length),1)[0]);
            }

            return result;
        }

        // 初始化列表项标签
        function initLis(arr) {
            let ul = document.querySelector("ul");
            let lis = [];

            // 遍历生成li
            for (let i = 0;i < arr.length;i ++) {
                let li = document.createElement("li");
                li.style.height = arr[i] + "%";

                li.dataset.height = arr[i];
                ul.appendChild(li);
                lis.push(li);
            }
            return lis;
        }

        // 对li数组进行排序
        async function sort(arr) {
            // 趟数
            for (let i = 1;i <= arr.length - 1 ;i ++) {
                // 每趟次数
                for (let j = 0; j < arr.length - i;j ++) {
                    let boo = await timeout([arr[j],arr[j + 1]]);
                    if (boo) {
                        console.log("交换位置");

                        // let t = arr[j];
                        // arr[j] = arr[j + 1];
                        // arr[j + 1] = t;

                        console.log(arr[j].dataset.height,",",arr[j + 1].dataset.height);

                        let t = arr[j].dataset.height;
                        arr[j].dataset.height = arr[j + 1].dataset.height;
                        arr[j + 1].dataset.height = t;

                        arr[j].style.height = arr[j].dataset.height + "%";
                        arr[j + 1].style.height = arr[j + 1].dataset.height + "%";
                    }
                }
            }

            function timeout([a,b]) {
                // console.log("h1 = ",h1,"h2 = ",h2)
                return new Promise(reslove => {
                    setTimeout(() => reslove(parseInt(a.dataset.height) > parseInt(b.dataset.height)),5)
                });
            }
        }  
        
        let arr = initArray();
        arr = initLis(arr);
        sort(arr);
    </script>
</body>
</html>